
#drawer {
	@text_color:    #0a0e14;
	@icon_color:    #abafb4;
	@selected_bg:   #f0f1f2;
	@selected_icon: #658fbf;
	@selected_text: #4c7eb7;

	header {
		background:lighten(@main_bg, 30%) no-repeat;
		background-size: cover;
		width: 100%; height: 170px;
		padding: 0px;

		&:before {
			display: block; content: ''; width: 100%; height: 100%;
			background: rgba(0,0,0,0.7);
		}
		.user-info {
			position: absolute; top:0; z-index: 2;
			display: block;
			.avatar {
				background-size: cover;
				width: 70px; height: 70px;
				border-radius: 50%;
				display: block;
				position: absolute; top:30px; left:0px;
			}
			em {
				color:#fff; display: block;
				position: absolute;
				top:60px; left:130px; width: 130px;
				line-height: 21px;
			}
		}
	}

	ul.menu-items {
		margin:0;
		li {
			display: block; width: 100%;
			color: @text_color; font-size: 14px;
			a {
				.ripple();
				font-weight: 600; line-height: 1px;
				display: block; width: 100%;
				padding: 10px 10px 25px 10px;
				color: inherit;
				icon svg {
					display: inline-block;
					margin:0 15px 0 30px;
					position: relative; top: 7px;
					fill:@icon_color;
					transition:color 0.2s linear;
				}
			} // a

			transition:all 0.2s linear;
			&.selected {
				background-color: @selected_bg;
				color: @selected_text;
				icon { fill:@selected_icon;  }
			}
		} // li
	} //ul.menu-items {
}
